<template>
  <div id="container">

    <div class="statistic-container">
      <div class="statistic-top">
        <div class="itemBox" v-for="(item, index) in statisticTopList" :key="index">
          <div class="img"><img :src="item.imgSrc" width="100%" height="100%" /></div>
          <div style="display: flex;width: 100%;">
            <div class="content">
              <div class="title">{{ item.title }}</div>
              <div class="num">{{ item.value }}</div>
            </div>
            <div style="font-size: 16px;display: flex;align-items: flex-end;">{{ item.unit }}</div>
          </div>
        </div>
      </div>

      <div class="statistic-bottom">
        <div class="goodsSum3">
          <img src="../../assets/images/A.png" alt="" />
          <div style="display: flex;">
            <h5>本年运输累计数量/金额</h5>
            <span style="display: flex;">
							<div style="width: 100%;">{{ goodsSum3.value}}</div>
							<div style="">吨</div>
						</span>
          </div>
          <span style="height: 60%;display: flex;align-items: flex-end;font-size:18px">
						<h5 style="width: 60%;">{{ amountSum3.value }}</h5>
						<h5 style="flex: 1;text-align: right;">{{ amountSum3.unit }}</h5>
					</span>
        </div>

        <div class="goodsSum">
          <img src="../../assets/images/B.png" alt="" />
          <div style="display: flex;">
            <h5>在途运输累计数量/金额</h5>
            <span style="display: flex;">
							<div style="width: 100%;">{{ goodsSum.value }}</div>
							<div style="">吨</div>
						</span>
          </div>
          <span style="height: 60%;display: flex;align-items: flex-end;font-size:18px;">
						<h5 style="width: 60%;">{{ amountSum.value }}</h5>
						<h5 style="flex: 1;text-align: right;">{{ amountSum.unit }}</h5>
					</span>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import {onMounted, reactive} from "vue";
import { allBaseInfoCount } from "@/common/api";
import { getAssetsFile } from '@/utils/getAssetsFile';

let goodsSum=reactive({})
let goodsSum3=reactive({})
let amountSum=reactive({})
let amountSum3=reactive({})

let statisticTopList=reactive( [
  {
    value: "",
    unit: "人",
    title: "司机数量",
    imgSrc:getAssetsFile('下载.png'),
  },
  {
    value: "",
    unit: "辆",
    title: "车辆",
    imgSrc:getAssetsFile('下载 (1).png')
  },
  {
    value: "",
    unit: "单",
    title: "运单数量",
    imgSrc:getAssetsFile('下载 (2).png'),
  },
  {
    value: "",
    unit: "人",
    title: "托运人数",
    imgSrc:getAssetsFile('下载 (3).png'),
  },
])

let numberMoneyFormat=function(value) {
  if (typeof value === "string") {value = +(value);}
  let i
  let k = 10000
  let param = { value: 0, unit: '元' }
  let sizes = ['元', '万元', '亿', '万亿']
  if (value < k) { param.value = value.toFixed(2);param.unit = '元'}
  else
  {i = Math.floor(Math.log(value) / Math.log(k)); param.value = ((value / Math.pow(k, i))).toFixed(2);param.unit = sizes[i];}
  return param;
}


onMounted(()=>{
  allBaseInfoCount().then(res=>{

    goodsSum = numberMoneyFormat(res.data.goodsSum);
    goodsSum3 = numberMoneyFormat(res.data.goodsSum3);
    amountSum = numberMoneyFormat(res.data.amountSum);
    amountSum3 = numberMoneyFormat(res.data.amountSum3);

    for (let i = 0; i < statisticTopList.length; i++){
      statisticTopList[3].value = res.data.userCount;
      statisticTopList[2].value = res.data.waybillCount;
      statisticTopList[1].value = res.data.carInfoCountAdmin;
      statisticTopList[0].value = res.data.appUserCountAdmin + 2800;
    }

  })
})




</script>

<style scoped lang="scss">
#container {
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;

  .statistic-container {
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    .statistic-top {
      height: 55%;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;

      .itemBox {
        width: 40%;
        display: flex;
        align-items: center;

        .img {
          width:100px;
          height: 60px;
          margin-left: 12px;
          margin-right: 12px;
        }

        .content {
          flex: 1;
          height: 100%;
          display: flex;
          flex-direction: column;

          .title {
            font-size:14px;
          }

          .num {
            color: #A3BEF1;
            font-size: 16px;
          }

          .amount {
            color: #a3bef1;
            font-size: 12px;
          }
        }
      }
    }

    .statistic-bottom {
      width: 90%;
      height: 45%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: space-around;

    }
  }
}

.goodsSum3 {
  width: 90%;
  display: flex;
  margin: 0 auto;
  font-size: 16px;
  height: 46px;
  text-align: center;
  align-items: flex-end;

  img {
    height: 100%;
  }

  div {
    width: 50%;
    display: flex;
    flex-direction: column;
  }

  span {
    flex: 1;
    height: 100%;
  }
}

.goodsSum {
  width: 90%;
  display: flex;
  margin: 0 auto;
  height:46px;
  font-size: 16px;
  text-align: center;
  align-items: flex-end;
  img {
    height: 100%;
  }

  div {
    width: 50%;
    display: flex;
    flex-direction: column;
  }

  span {
    flex: 1;
    height: 100%;
  }
}
</style>